// https://reactnative.cn/docs/sample-application-movies/
import React, {Component} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';

// MOCK影片数据
const MOCK_MOVIE_DATA = [
  {
    title: '烂番茄',
    year: '2015',
    posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}
  }
];
// JSON DATA
const REQUEST_URL = "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";

export default class HelloWorldApp extends Component {
  // 构造函数
  constructor(props) {
    super(props);
    this.state = {
      movies: null,   // 存放自定义的state变量及初始值
    };
  }

  fetchData = () => {
    fetch(REQUEST_URL).then((res) => res.json()).then((resData) => {
      // setState实际上会触发一次重新渲染的流程，此时 render 函数被触发
      this.setState({
        movies: resData.movies
      });
      console.log(resData);
    })
  };

  // React组件生命周期钩子，在组件刚加载完成的时候调用一次，以后不会再被调用。
  componentDidMount () {
    this.fetchData();
  }

  render () {
    let movie = MOCK_MOVIE_DATA[0];
    return (
      <View style={styles.container}>
        <View style={styles.movieItem} >
          <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} onPress={this.onItemClick}/>
          <View style={styles.rightContainer}>
            <Text style={styles.title}>{movie.title}</Text>
            <Text style={styles.year}>{movie.year}</Text>
          </View>
        </View>
      </View>
    )
  }
}

// 样式表
let styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  movieItem: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: "#ccc"
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
    fontWeight: 'bold'
  },
  year: {
    textAlign: 'center'
  },
  thumbnail: {
    width: 53,
    height: 81
  }
});